<script setup lang="ts">
import { ArrowDown } from "@element-plus/icons-vue";
import { useUnitStore } from "./store.ts";

const store = useUnitStore();

const handleRowClick = (val) => {
  console.log(val);
};

const handleRowDblClick = (val) => {
  console.log("db");
};

const showDetails = (row) => {
  console.log(row);
};
const showDetailsNewWindow = (row) => {
  console.log(row);
};
const deleteCompanyUnit = (row) => {
  console.log(row);
};
const openCommentModal = (row) => {
  console.log(row);
};
const addReminder = (row) => {
  console.log(row);
};
</script>

<template>
  <el-table
    :data="store.units"
    border
    style="width: 100%"
    @row-click="handleRowClick"
    highlight-current-row
    @row-dblclick="handleRowDblClick"
  >
    <el-table-column
      v-if="store.columns_show[0].value"
      show-overflow-tooltip
      type="index"
      label=""
      width="80"
    />
    <el-table-column
      v-if="store.columns_show[1].value"
      show-overflow-tooltip
      prop="base_name"
      label="申请人"
    />
    <el-table-column
      v-if="store.columns_show[2].value"
      show-overflow-tooltip
      prop="base_deptname"
      label="申请人部门"
    />
    <el-table-column
      v-if="store.columns_show[3].value"
      show-overflow-tooltip
      prop="sericnum"
      label="单号"
    />
    <el-table-column
      v-if="store.columns_show[4].value"
      show-overflow-tooltip
      prop="name"
      label="名称"
    />
    <el-table-column
      v-if="store.columns_show[5].value"
      show-overflow-tooltip
      prop="nameen"
      label="英文名"
    />
    <el-table-column
      v-if="store.columns_show[6].value"
      show-overflow-tooltip
      prop="pid"
      label="所属单位"
    />
    <el-table-column
      v-if="store.columns_show[7].value"
      show-overflow-tooltip
      prop="fuzename"
      label="对应负责人"
    />
    <el-table-column
      v-if="store.columns_show[8].value"
      show-overflow-tooltip
      prop="city"
      label="所在城市"
    />
    <el-table-column
      v-if="store.columns_show[9].value"
      show-overflow-tooltip
      prop="address"
      label="地址"
    />
    <el-table-column
      v-if="store.columns_show[10].value"
      show-overflow-tooltip
      prop="tel"
      label="电话"
    />
    <el-table-column
      v-if="store.columns_show[11].value"
      show-overflow-tooltip
      prop="fax"
      label="传真"
    />
    <el-table-column
      v-if="store.columns_show[12].value"
      show-overflow-tooltip
      prop="sort"
      label="排序号"
    />
    <el-table-column
      v-if="store.columns_show[13].value"
      show-overflow-tooltip
      label="操作"
    >
      <template #default="{ row }">
        <el-dropdown trigger="click" type="primary" size="small">
          <el-button link class="underline">
            操作
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="showDetails(row)"
                >详情</el-dropdown-item
              >
              <el-dropdown-item @click="showDetailsNewWindow(row)"
                >详情(新窗口)</el-dropdown-item
              >
              <el-dropdown-item @click="openCommentModal(row)"
                >评论</el-dropdown-item
              >
              <el-dropdown-item @click="addReminder(row)"
                >+ 添加提醒设置</el-dropdown-item
              >
              <el-dropdown-item
                divided
                @click="deleteCompanyUnit(row)"
                type="danger"
                >删除</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </el-table-column>
  </el-table>
</template>
